<!DOCTYPE html>
<html>
<head>
    <style>
        .box1
        {
            width: 400px;
            border: 3px solid black;
            font-size: 22px;
            position: absolute;
            left: 250px;
        }
        /* ------------------------------------ */
        p{
            width:100px;
        }
        .one{border-style: dotted;}
        .two{border-style: dashed;}
        .three{border-style: solid;}
        .four{border-style: double;}
        .five{border-style: groove;}
        .six{border-style: ridge;}
        .seven{border-style: inset;}
        .eight{border-style: outset;}
    </style>
    <meta charset="UTF-8" />
    <title>CSS边框</title>
</head>
<body>
    <div class="box1">
        属性:<br>1.border: 宽度 样式  颜色
        <li>边框的样式:</li>
        <ol type="I">
            <li>dotted:点状边框</li>
            <li>dashed:虚线</li>
            <li>solid:实线</li>
            <li>double:双线</li>
            <li>groove:3D凹槽边框</li>
            <li>ridge:3D垄状边框</li>
            <li>inset:3Dinset边框</li>
            <li>outset:3Doutset边框</li>
        </ol>
    </div>
    <!-- ----------------------------------------- -->
    <p class="one">我喜欢你</p>
    <p class="two">我喜欢你</p>
    <p class="three">我喜欢你</p>
    <p class="four">我喜欢你</p>
    <p class="five">我喜欢你</p>
    <p class="six">我喜欢你</p>
    <p class="seven">我喜欢你</p>
    <p class="eight">我喜欢你</p>
</body>
</html>